<script setup lang="ts">
import dayjs from 'dayjs'
import { PayRecordApi } from '@/apis'
import type { TableInstanceColumns } from '@/components/ProTable/type'
import { useDownload, useForm, useTable } from '@/hooks'
import { formatMoney } from '@/utils/common'

defineOptions({ name: 'PayRecordList' })

const router = useRouter()

const { form, resetForm } = useForm<any>({
  dateFrom: dayjs().format('YYYY-MM-DD'),
  dateTo: dayjs().format('YYYY-MM-DD'),
  finAccountId: undefined,
  studentId: undefined,
})

const {
  tableData,
  loading,
  pagination,
  search: searchData,
} = useTable(pagination => PayRecordApi.getPayRecordPage({ ...form, ...pagination }), { immediate: false })

const columns: TableInstanceColumns[] = [
  { title: '序号', width: 66, align: 'center', fixed: 'left', render: ({ rowIndex }) => h('span', {}, rowIndex + 1 + (pagination.current - 1) * pagination.pageSize) },
  { title: '订单号', dataIndex: 'id', fixed: 'left', width: 200 },
  { title: '付款时间', dataIndex: 'payTime', width: 180 },
  { title: '学生信息', dataIndex: 'studentInfo', slotName: 'studentInfo', width: 120 },
  { title: '购课班级', slotName: 'orderItem', align: 'center', minWidth: 420 },
  { title: '原价', dataIndex: 'originalTotalPrice', slotName: 'originalTotalPrice', align: 'right', width: 120 },
  { title: '优惠', dataIndex: 'discountTotalPrice', slotName: 'discountTotalPrice', align: 'right', width: 120 },
  { title: '实收', dataIndex: 'actualTotalPrice', slotName: 'actualTotalPrice', align: 'right', width: 120 },
  { title: '收款账户', dataIndex: 'payAccountId', slotName: 'payAccountId', width: 120 },
  { title: '三方单号', dataIndex: 'outTradeNo', width: 180, render: ({ record }) => record.outTradeNo || '-' },
  { title: '创建人', dataIndex: 'createUserName', width: 120, render: ({ record }) => record.createUserName || '【家长】' },
]

// 班级详情
const toClassDetail = (row) => {
  router.push({ path: '/education/class/detail', query: { id: row.classId } })
}

const summary = ref<PayRecordApi.PayRecordSummaryResp>({
  totalCount: 0,
  actualTotalPrice: 0,
})

const search = async () => {
  searchData()
  summary.value = await PayRecordApi.getPayRecordSummary(form)
}

const onExportExcel = async () => {
  useDownload(() => PayRecordApi.exportPayRecord(form))
}

watch(form, () => search())

onMounted(() => {
  search()
})
</script>

<template>
  <ProPage title="收款明细查询">
    <template #title-right>
      <div class="ml-100px flex">
        <StatisticsItem tip="订单数量" icon="count" unit="笔" :count="summary.totalCount" />
        <StatisticsItem tip="订单总额" icon="count" unit="元" count-color="#ff7d00" :count="formatMoney(summary.actualTotalPrice)" />
      </div>
    </template>
    <ProTable
      :data="tableData"
      :columns="columns"
      :loading="loading"
      :pagination="pagination"
      @refresh="search"
    >
      <template #toolbar-left>
        <a-space>
          <RangePicker v-model:from="form.dateFrom" v-model:to="form.dateTo" :time="false" />
          <AccountSelect v-model="form.finAccountId" placeholder="收款账户" class="min-w-260px" />
        </a-space>
      </template>
      <template #toolbar-right>
        <a-button type="text" size="medium" @click="onExportExcel">
          <template #icon>
            <icon-download />
          </template>
          <span>导出</span>
        </a-button>
      </template>
      <template #studentInfo="{ record }">
        {{ record.student.name }}
      </template>
      <template #orderItem="{ record }">
        <div v-for="(item, index) in record.orderItemList" :key="index" class="w-full flex-row-start-center">
          <a-tooltip :content="item.className">
            <a-tag class="mr-1 w-40px!" color="green" size="small">
              {{ item.lessonIndexes.length }}节
            </a-tag>
            <a-link class="px-0!" @click="toClassDetail(item)">
              <span class="w-348px truncate text-align-left">{{ item.className }}</span>
            </a-link>
            <!-- <a-tag v-if="item.refundPrice" class="mr-1 w-40px!" color="red" size="small">
              -{{ formatMoney(item.refundPrice) }}
            </a-tag> -->
          </a-tooltip>
        </div>
      </template>
      <template #originalTotalPrice="{ record }">
        {{ formatMoney(record.originalTotalPrice) }}
      </template>
      <template #discountTotalPrice="{ record }">
        -{{ formatMoney(record.discountTotalPrice) }}
      </template>
      <template #actualTotalPrice="{ record }">
        <span class="text-#ff7d00">
          {{ formatMoney(record.actualTotalPrice) }}
        </span>
      </template>
      <template #payAccountId="{ record }">
        {{ record.finAccount.name }}
      </template>
    </ProTable>
  </ProPage>
</template>

<style lang="less" scoped></style>
